<template>
  <view class="category-wrap">
    <u-navbar class="navbar" :is-back="false">
      <div class="title">商品分类</div>
      <u-search class="nav-search" disabled @click.native="search" placeholder="搜索商品" :show-action="false"></u-search>
    </u-navbar>
	<u-tabs :list="topList"  :current="current" @change="change"></u-tabs>
    <view class="content">
      <scroll-view scroll-y scroll-with-animation class="left-aside">
        <view v-for="(item, index) in tabList" :key="item.id" class="f-item b-b" :class="{ active: item.id === currentId }" @click="tabtap(item, index)">
          {{ item.name }}
        </view>
      </scroll-view>
      <scroll-view scroll-y scroll-with-animation class="right-aside">
		<view class="goods-list" style="display: flex; margin-bottom: 6rpx;"
		      :style="{'background-color': '#FFFFFF'}"
		      v-for="(item, index) in categoryList" :key="item.id">
		    <view style="border: 1rpx solid #eeeeee;padding-left: -50rpx;">
		        <image style="height: 200rpx; width: 200rpx; padding-top: 15rpx;"
		               :src="item.small"
		               mode="aspectFill"></image>
		    </view>
		    <view style="width: 100%;margin-left: 10rpx;">
		        <view style="min-height: 82rpx; overflow: hidden;padding-top: 7rpx;">
		            <div style="font-size: 32rpx;">
		                {{item.goodsName}}
		            </div>
		        </view>
		        <view style="display: flex; padding-bottom: 4rpx;">
		            <view style="font-weight: bold; color: red; padding-top: 5rpx;">
		                ￥{{item.price}}
		            </view>
		            <view style="width: 100%; text-align: right; padding-right: 5rpx;">
		                <u-number-box size="18" :value="item.quantity" :min="1" :max="999" :key="item.id" :long-press="false"
		                              @blur="valueChange($event, item)" @minus="valueChange($event, item)"
		                              @plus="valueChange($event, item)"></u-number-box>
		            </view>
		        </view>
		    </view>
		</view>
      </scroll-view>
    </view>
  </view>
</template>

<script>
import { getCategoryList } from "@/api/goods.js";
export default {
  data() {
    return {
      currentId: 0,
	  topList:[],
      tabList: [], //左侧标题列表
      categoryList: [], //右侧分类数据列表
	  current: 0
    };
  },
  onLoad() {
    this.loadData();
    // #ifdef MP-WEIXIN
    // 小程序默认分享
    uni.showShareMenu({ withShareTicket: true });
    // #endif
  },
  methods: {
    /**
     * 查询
     */
    search() {
      uni.navigateTo({
        url: "/pages/navigation/search/searchPage",
      });
    },
	//顶部切换事件
	change(index) {
		this.current = index;
		this.tabList = this.topList[index].children;
		this.currentId = this.topList[index].children[0].id;
		this.loadListContent(index);
	},
    /**
     * 加载图片
     */
    async loadData() {
      let list = await getCategoryList(0);
	  console.log(list);
      this.topList = list.data.result;
	   console.log(this.topList);
	  this.change(0);
    },

    /**
     * 加载列表内容
     */
    loadListContent(index) {
      this.categoryList = this.tabList[index].goodsVOList;
	  for(let i=0; i < 15; i++){
		  let a1 = this.$u.deepClone(this.categoryList[0]);
		  a1.id = this.$u.random(1000, 9999999);
		  this.categoryList.push(a1);
	  }
    },
    /**
     * 一级分类点击
     */
    tabtap(item, i) {
      if (item.id != this.currentId) {
        this.currentId = item.id;
        this.loadListContent(i);
      }
    },

    navigateToList(sid, tid) {
      uni.navigateTo({
        url: `/pages/navigation/search/searchPage?category=${tid}`,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
page {
  height: 100%;
  background-color: #fdfaff;
}
/* 解决小程序和app滚动条的问题 */
/* #ifdef MP-WEIXIN || APP-PLUS */
::-webkit-scrollbar {
  display: none;
}
/* #endif */
/* 解决H5 的问题 */
/* #ifdef H5 */
uni-scroll-view .uni-scroll-view::-webkit-scrollbar {
  /* 隐藏滚动条，但依旧具备可以滚动的功能 */
  display: none;
}
/* #endif */
.s-list {
  box-shadow: 0 4rpx 12rpx 0 rgba(0, 0, 0, 0.05);
}
.nav-search {
  padding-left: 30rpx !important;
  padding-right: 20rpx !important;
}
.title {
  display: block;
  width: 259rpx;
  text-align: center;
   font-size: 28rpx;
}

.category-wrap {
  height: 100%;
  .content {
    height: calc(100vh - 134px);
    display: flex;
    color: #333;
    font-size: 28rpx;
    background: #fff;
  }
  .left-aside {
    flex-shrink: 0;
    width: 200rpx;
    height: 100%;
    background-color: #f7f7f7;
  }
  .f-item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 97rpx;
    position: relative;
    &.active {
      font-weight: bold;
      color: $light-color;
      background: #fff;
    }
  }
  .right-aside {
    flex: 1;
    overflow: hidden;
    padding: 0 30rpx 0 30rpx;
  }

  .top-img {
    width: 500rpx;
    height: 230rpx;
    border-radius: 8px;
    overflow: hidden;
    image {
      width: 100%;
      height: 100%;
    }
  }
  .s-item {
    display: flex;
    align-items: center;
    height: 70rpx;
    padding-top: 16rpx;
    font-weight: 500;
  }
  .t-list {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    padding-top: 12rpx;
  }
  .margin-right {
    margin-right: 0 !important;
  }
  .t-item {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 150rpx;
    margin-right: 25rpx;
    font-size: 24rpx;
    padding-bottom: 20rpx;
    image {
      width: 140rpx;
      height: 140rpx;
      border-radius: 8px;
      margin-bottom: 20rpx;
    }
    /deep/ .u-image {
      width: 140rpx !important;
      height: 140rpx !important;
      border-radius: 8px !important;
      margin-bottom: 20rpx !important;
    }
  }
}
// 修改菜单显示
.u-scroll-view {
	width: 100%;
	white-space: nowrap;
	position: relative;
}
.u-tabs-scorll-flex {
	display: flex;
	justify-content: space-between;
}
.menu-list {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;

  > .menu-item {
    text-align: center;
    width: 20%;
    // flex: 1;
    margin: 20rpx 0;
  }
}
.menu-img {
  display: flex;
  margin: 0 auto;
  width: 88rpx;
  height: 88rpx;
}
.menu-title {
  font-size: 24rpx;
}
</style>
